<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import Tabbar from '@/components/TabbarCustom.vue'
	import { useUsercodeStore } from '@/store/usercode.js'

	const userCodeStore = useUsercodeStore()

	const showmoney = ref(true)

	// 获取用户信息
	const userInfo = ref({})
	const history = ref([])
	async function getUserInfo() {
		const res = await http.request({
			url: '/api/user/userMsg',
			method: 'POST',
			data: {},
		})
		console.log('user')
		console.log(res)
		userInfo.value = res.data.data
		history.value = res.data.footPrint

		if (res.data.address_status == 1) {
			uni.utils.toast('背包商品即将自动发货，请填写地址。')
			setTimeout(() => {
				uni.navigateTo({
					url: `/minePage/editaddress/index`,
				})
			}, 2000)
		}
	}

	const todaySign = ref(false)
	const totalSignDays = ref(0)
	async function getSignDays() {
		const res = await http.request({
			url: '/api/index/signLog',
			method: 'POST',
			data: {},
		})
		console.log(res)
		if (res.st == 1) {
			totalSignDays.value = res.data.data.length
			//过滤签到的日期
			calenderArr.value.forEach((date) => {
				res.data.data.forEach((item) => {
					let day = parseTime(item.date, '{y}-{m}-{d}').split('-')
					if (day[2][0] == 0) {
						if (date.day == day[2][1]) {
							date.ifSign = true
						}
						if (nowDay.value == day[2][1]) {
							todaySign.value = true
						}
					} else {
						if (date.day == day[2]) {
							date.ifSign = true
						}
						if (nowDay.value == day[2]) {
							todaySign.value = true
						}
					}
				})
			})
		}
	}

	//跳转购买
	function goBuy(item) {
		if (item.type == 1) {
			uni.navigateTo({
				url: `/homePage/goodsinfo/index?id=${item.goods_id}`,
			})
		} else if (item.type == 2) {
			uni.navigateTo({
				url: `/drawPage/wxDraw/index?id=${item.box_id}`,
			})
		} else if (item.type == 3) {
			uni.navigateTo({
				url: `/drawPage/txDraw/index?id=${item.box_id}`,
			})
		} else if (item.type == 4) {
			uni.navigateTo({
				url: `/drawPage/treasureDraw/index?id=${item.box_id}`,
			})
		}
	}

	function signin(){
		uni.navigateTo({
			url: `/homePage/signin/index`,
		})
	}

	// 我的背包
	function checkBag() {
		uni.navigateTo({
			url: `/minePage/mybag/index`,
		})
	}

	//查看积分
	function checkPoint() {
		console.log("查看积分")
		uni.navigateTo({
			url: `/minePage/pointdetail/index`,
		})
	}

	//钱包充值
	function checkWallet() {
		uni.navigateTo({
			url: `/minePage/wallet/index`,
		})
	}

	//历史记录
	function checkhistory() {
		uni.navigateTo({
			url: `/minePage/history/index`,
		})
	}

	//查看发货单
	function checkOrder(index) {
		uni.navigateTo({
			url: `/minePage/order/index?index=${index}`,
		})
	}
	//商城
	function checkMallOrder() {
		uni.navigateTo({
			url: `/minePage/mallorder/index`,
		})
	}

	// 消息通知
	function checkNotice() {
		uni.navigateTo({
			url: `/minePage/notice/index`,
		})
	}

	// 优惠券
	function checkCoupon() {
		uni.navigateTo({
			url: `/minePage/coupon/index`,
		})
	}

	// 地址
	function checkAddress() {
		uni.navigateTo({
			url: `/minePage/address/index`,
		})
	}

	// 心愿单
	function checkHope() {
		uni.navigateTo({
			url: `/minePage/hopelist/index`,
		})
	}

	//期待
	function theToast() {
		uni.utils.toast('敬请期待')
	}

	// 联系客服
	const servicepopup = ref()
	function service() {
		servicepopup.value.open('center')
	}

	function scan(url) {
		uni.previewImage({
			urls: [url],
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: (res) => {
					console.log(res)
				},
				fail: (res) => {
					console.log(res.errMsg)
				},
			},
		})
	}
	//设置
	function checkSetings() {
		uni.navigateTo({
			url: `/minePage/setting/index`,
		})
	}

	//人脸识别
	function authentication() {
		if (userInfo.value.is_sm == 1) {
			uni.navigateTo({
				url: `/minePage/authenticationsuccess/index`,
			})
		} else {
			uni.navigateTo({
				url: `/minePage/authentication/index`,
			})
		}
	}

	//隐藏接口
	const hidding = ref(true)
	function hidePart() {
		if (userCodeStore.usercode.mobile == '18254076917') {
			hidding.value = false
		} else {
			hidding.value = true
		}
	}
	onShow(() => {
		if (
			userCodeStore.usercode.token == '' ||
			userCodeStore.usercode.userId == ''
		) {
			uni.utils.toast('为了让您有更好的体验，请先登录')
			setTimeout(() => {
				uni.navigateTo({
					url: `/pages/login/login`,
				})
			}, 2000)
			return
		}

		hidePart()
		// uni.hideTabBar()
		getUserInfo()
		getSignDays()
	})

	// 商家入驻
	async function merchantSettleIn() {
		const res = await http.request({
			url: '/api/shop/myApply',
			method: 'POST',
			data: {},
		})
		console.log(res)
		if (!res.data) {
			uni.navigateTo({
				url: `/minePage/settlein/index`,
			})
		} else {
			if (res.data.status == 2) {
			uni.navigateTo({
				url: `/minePage/merchantcenter/index`,
			})
			} else {
				uni.navigateTo({
					url: `/minePage/settlestatus/index`,
				})
			}
		}
	}
</script>

<template >
	<view class="mine-content" style="padding-bottom: 182rpx">
		<view class="mine-top">
			<view class="mine-top-left">
				<image
					:src="userInfo.himg"
					style="
						width: 136rpx;
						height: 136rpx;
						border-radius: 50%;
						margin-right: 24rpx;
					"
					mode=""
				></image>
				<view class="mine-detail">
					<view class="mine-name"> {{ userInfo.nickname }} </view>
				</view>
			</view>
			<view class="mine-top-right" @click="checkSetings">设置</view>
		</view>
		<view class="mine-bottom">
			<view class="mine-sign">
				<view class="sign-top">
					<view class="sign-button" @click="signin"> </view>
					<view class="sign-day">
						<view class="sign-day-title"> 已连续签到：{{totalSignDays}}天 </view>
						<view class="sign-day-step-total">
							<view
								class=""
								style="width: 58rpx"
								v-for="item in 7"
								:key="item"
							>
								<view class="sign-day-step">
									<view
										class="step-circle"
										:class="{ 'step-star': item == totalSignDays }"
									>
										<view class="step-bar" v-if="item != 7">
										</view>
										<view
											class="step-num"
											:class="{
												'step-num-star': item == totalSignDays,
											}"
											v-if="item == totalSignDays"
											>Day {{totalSignDays}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="money-points">
					<view class="my-money" @click="checkWallet">
						<view class="">
							<text  >我的卡尘:</text>
						</view>
						<view class="">
							<text  style="color: #7948EA; font-weight: 600;">{{ userInfo.balance }}</text>
						</view>
						<view class="">
							<text  style="color: #808080;">></text>
						</view>
					</view>
					<view class="my-points" @click="checkPoint">
						<view class="">
							<text  >我的积分:</text>
						</view>
						<view class="">
							<text  style="color: #7948EA; font-weight: 600;">{{ userInfo.integral }}</text>
						</view>
						<view class="">
							<text  style="color: #808080;">></text>
						</view>
					</view>
				</view>
			</view>
			<!-- //菜单 -->
			<view class="mine-treasure"> 
				<!-- //我的背包 -->
				<view class="my-bag" @click="checkBag">
					<view class="bag-icon">
						<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/bag.png"></image>
					</view>
					<view class="bag-text">
						<text >我的背包</text>
					</view>
				</view>
				<!-- //我的卡券 -->
				<view class="my-bag" @click="checkCoupon">
					<view class="bag-icon">
						<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/coupon.png"></image>
					</view>
					<view class="bag-text">
						<text >我的卡券</text>
					</view>
				</view>
				<!-- //我的心愿单 -->
				<view class="my-bag" @click="checkHope">
					<view class="bag-icon">
						<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/love.png"></image>
					</view>
					<view class="bag-text">
						<text >我的心愿单</text>
					</view>
				</view>
				<!-- //我的消息 -->
				<view class="my-bag" @click="checkNotice">
					<view class="bag-icon">
						<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/message.png"></image>
					</view>
					<view class="bag-text">
						<text >我的消息</text>
					</view>
				</view>
			</view>
			<!-- //战令 -->
			<!-- <view class="mine-opration"> </view> -->
			
			<!-- //发货订单 -->
			<view class="mine-delivery"> 
				<view class="top-title">
					<text style="font-size: 28rpx;">发货订单 </text>
					<text style="font-size: 16rpx; color: #808080;" @click="checkOrder(0)">查看更多 ></text>
				</view>
				<view class="line"></view>
				<view class="bottom-icon">
					<!-- //我的背包 -->
					<view class="my-bag " style="position: relative;" @click="checkOrder(1)">
						<view class="bag-icon">
							<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/shipped.png"></image>
						</view>
						<view class="bag-text">
							<text >待发货</text>
						</view>
						<view class="notice" style="" v-if="userInfo.wait_num && userInfo.wait_num != 0">
							{{ userInfo.wait_num }}
						</view>
					</view>
					<!-- //我的背包 -->
					<view class="my-bag" @click="checkOrder(2)">
						<view class="bag-icon">
							<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/received.png"></image>
						</view>
						<view class="bag-text">
							<text >待收货</text>
						</view>
						<view class="notice" style="" 	
							v-if="
								userInfo.delivery_num &&
								userInfo.delivery_num != 0
							">
							{{ userInfo.delivery_num }}
						</view>
					</view>
					<!-- //我的背包 -->
					<view class="my-bag" @click="checkOrder(3)">
						<view class="bag-icon">
							<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/finish.png"></image>
						</view>
						<view class="bag-text">
							<text >已完成</text>
						</view>
					</view>
				</view>
			
			</view>
			<view class="mine-other">
				<view class="other-top" style="border-bottom: 2rpx solid rgba(229, 229, 229, 1)">
					<view class="other-item" style="border-right: 2rpx solid rgba(229, 229, 229, 1)" @click="checkMallOrder">
						<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/shop-order.png" style="width: 48rpx;height: 48rpx;margin-right: 13rpx;"mode=""></image>
						<view class="" style="font-size: 28rpx">
							商城订单
						</view>
					</view>
					<view class="other-item" @click="checkAddress">
						<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/address.png" style="width: 48rpx;height: 48rpx;margin-right: 13rpx;"mode=""></image>
						<view class="" style="font-size: 28rpx">
							收货地址
						</view></view>
				</view>
				<view class="other-bottom">
					<view class="other-item" style="border-right: 2rpx solid rgba(229, 229, 229, 1)" @click="merchantSettleIn">
						<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/mine-merchane.png" style="width: 48rpx;height: 48rpx;margin-right: 13rpx;"mode=""></image>
						<view class="" style="font-size: 28rpx">
							商家中心
						</view>
					</view>
					<view class="other-item" @click="service">
						<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/kefu.png" style="width: 48rpx;height: 48rpx;margin-right: 13rpx;"mode=""></image>
						<view class="" style="font-size: 28rpx">
							联系客服
						</view></view>
				</view>
			</view>
		</view>
		<Tabbar :current="4"></Tabbar>

		<!-- 客服弹出层 -->
		<uni-popup ref="servicepopup" type="center">
			<view class="servicepopup-content">
				<image
					@longpress="
						scan(
							'https://ojqn.wm2177.com/wechat_imgs/mine/service.png'
						)
					"
					src="https://ojqn.wm2177.com/wechat_imgs/mine/service.png"
					style="width: 100%; height: 100%"
					mode=""
				></image>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	
	.mine-content {
		.servicepopup-content {
			width: 702rpx;
			height: 906rpx;
			border-radius: 40rpx;
			overflow: hidden;
		}
		.mine-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 222rpx;
			padding: 0 36rpx;
			box-sizing: border-box;
			background: url('https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/mine-top.png')
				no-repeat;
			background-size: 100%;
			.mine-top-left {
				display: flex;
				align-items: center;
				.mine-detail {
					display: flex;
					flex-direction: column;
					align-items: center;
					.mine-name {
						margin-bottom: 14rpx;
						font-weight: 32rpx;
						color: rgba(116, 11, 0, 1);
					}
					.mine-id {
						width: 206rpx;
						height: 26rpx;
						border-radius: 13rpx;
						background-color: #fff;
						text-align: center;
						line-height: 26rpx;
						font-size: 20rpx;
						color: rgba(116, 11, 0, 1);
					}
				}
			}
			.mine-top-right {
				width: 82rpx;
				height: 42rpx;
				border: 2rpx solid rgba(175, 140, 255, 1);
				border-radius: 10rpx;
				background-color: #fff;
				font-size: 22rpx;
				line-height: 42rpx;
				text-align: center;
				color: rgba(121, 72, 234, 1);
			}
		}
		.mine-bottom {
			padding: 17rpx 8rpx;
			background-color: rgba(233, 234, 242, 1);
			.mine-sign {
				display: flex;
				align-items: center;
				flex-direction: column;
				height: 256rpx;
				padding: 18rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 14rpx;
				.sign-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					.sign-button {
						width: 232rpx;
						height: 80rpx;
						background: url('https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/sign-button.png')
							no-repeat;
						background-size: 100%;
					}
					.sign-day {
						width: 436rpx;
						height: 108rpx;
						border-radius: 14rpx;
						border: 4rpx dashed rgba(225, 212, 255, 1);
						padding: 8rpx 30rpx;
						box-sizing: border-box;
						.sign-day-title {
							font-weight: 600;
							font-size: 20rpx;
							color: rgba(162, 122, 255, 1);
						}
						.sign-day-step-total {
							display: flex;
							align-items: center;
							// margin-top: 9rpx;
							.sign-day-step {
								.step-star {
									width: 30rpx !important;
									height: 30rpx !important;
									background-color: transparent !important;
									background: url('https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/step-star.png')
										no-repeat;
									background-size: 100%;
								}
								.step-circle {
									position: relative;
									width: 11rpx;
									height: 11rpx;
									box-sizing: border-box;
									border-radius: 50%;
									background-color: rgba(162, 122, 255, 1);
									.step-bar {
										position: absolute;
										top: 50%;
										left: 11rpx;
										transform: translateY(-50%);
										width: 48rpx;
										height: 5rpx;
										background-color: rgba(
											162,
											122,
											255,
											1
										);
									}
									.step-num {
										position: absolute;
										top: 19rpx;
										transform: translateX(-50%);
										width: 66rpx;
										height: 26rpx;
										border-radius: 13rpx;
										background-color: rgba(
											157,
											115,
											255,
											1
										);
										font-size: 16rpx;
										text-align: center;
										line-height: 26rpx;
										font-family: freeBB;
										color: #fff;
									}
									.step-num-star {
										top: 30rpx !important;
										transform: translateX(-36%) !important;
									}
								}
							}
						}
					}
				}
				.money-points{
					display: flex;
					justify-content: space-between;
					width: 100%;
					margin: 45rpx auto;
					.my-money,.my-points{
						display: flex;
						color: #000;
						font-size: 26rpx;
						justify-content: space-evenly;
						width: 50%;
						
					}
				}
			}
			.mine-treasure {
				height: 158rpx;
				margin-top: 11rpx;
				border-radius: 14rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-evenly;
				font-size: 24rpx;
				color: #000;
				.my-bag{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					position: relative;
					// margin-left: 5%;
					
					.bag-icon{
						
						image{
							width: 62rpx;
							height: 62rpx;
						}
					}
					.bag-text{
						
					}
					
				}
			
			}
			.mine-opration {
				height: 236rpx;
				margin-top: 11rpx;
				border-radius: 14rpx;
				background-color: #fff;
			}
			.mine-delivery {
				height: 236rpx;
				margin-top: 11rpx;
				border-radius: 14rpx;
				background-color: #fff;
				.top-title{
					display: flex;
					justify-content: space-between;
					padding: 20rpx 36rpx;
					box-sizing: border-box;
					align-items: center;
				}
				.line {
					width: 90%;
					// height: 0.5rpx;
					background: #E5E5E5;
					border: 0.8rpx solid #E5E5E5;
					border-radius: 2rpx;
					margin: auto;
				}
				.bottom-icon{
					display: flex;
					justify-content: space-between;
					padding: 20rpx 60rpx;
					box-sizing: border-box;
					font-size: 26rpx;
					.notice{
						 position: relative;
						 width: 24rpx;
						 height: 24rpx;
						 background-color: #7948EA;
						 color: #fff;
						 border-radius: 40rpx;
						 text-align: center;
						 font-size: 16rpx;
						 line-height: 24rpx;
						 top: -105rpx;
						 left: 25rpx;
					}
					.my-bag{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						// margin-left: 5%;
						
						.bag-icon{
							
							image{
								width: 62rpx;
								height: 62rpx;
							}
						}
						.bag-text{
							
						}
					}
				}
			}
			.mine-other {
				height: 302rpx;
				margin-top: 11rpx;
				padding: 7rpx 0rpx;
				box-sizing: border-box;
				border-radius: 14rpx;
				background-color: #fff;
				.other-top {
					display: flex;
					align-items: center;
					width: 100%;
					padding-bottom: 8rpx;
					box-sizing: border-box;
				}
				.other-bottom {
					display: flex;
					align-items: center;
					width: 100%;
					padding-top: 8rpx;
					box-sizing: border-box;
				}
				.other-item {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
					height: 136rpx;
				}
			}
		}
	}
</style>
